<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- =============== VENDOR STYLES ===============-->
    <link rel="stylesheet" href="__STATIC__/vendor/fontawesome/css/font-awesome.min.css">
    <!-- =============== PAGE VENDOR STYLES ===============-->
    <!-- =============== BOOTSTRAP STYLES ===============-->
    <link rel="stylesheet" href="__STATIC__/css/bootstrap.css" id="bscss">
    <!-- =============== APP STYLES ===============-->
    <link rel="stylesheet" href="__STATIC__/css/app.css" id="maincss">

</head>
<body>
<form method="POST" action="{:url('questionnaire/sort')}" id="form" accept-charset="UTF-8" class="layui-form">
    <input type="hidden" name="id" value="{$naire.id}" id="id">
    <div class="layui-form-item">问卷名称:{$naire.name}</div>

    <div class="layui-form-item">
        <div class="content-wrapper">
            <div class="dd" id="nestable">
                <ol class="dd-list">
                    {foreach $naire.category as $n}
                    <li class="dd-item" data-id="{$n.id}">
                        <div class="dd-handle">{$n.id}</div>
                        {notempty name='$n.children'}
                        <ol class="dd-list">
                            {foreach $n.children as $c}
                            <li class="dd-item" data-id="{$c.id}">
                                <div class="dd-handle">{$c.id}</div>
                            </li>
                            {/foreach}
                        </ol>
                        {/notempty}
                    </li>
                    {/foreach}
                </ol>
            </div>
            <textarea class="form-control" id="nestable-output"></textarea>
        </div>
    </div>

    <!---->
    <div class="layui-input-block">
        <button class="btn btn-success" id="submit" type="button">提交</button>
        <button class="btn btn-default" type="button">取消</button>
    </div>
</form>

</body>
<script src="__STATIC__/vendor/jquery/dist/jquery.js"></script>
<script src="__STATIC__/vendor/nestable/jquery.nestable.js"></script>
<script src="__STATIC__/plugins/layui/layui.js"></script>

<script>


    (function(window, document, $, undefined){

        $(function(){
            var updateOutput = function(e)
            {
                var list   = e.length ? e : $(e.target),
                    output = list.data('output');
                if (window.JSON) {
                    output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
                } else {
                    output.val('JSON browser support required for this demo.');
                }
            };

            // activate Nestable for list 1
            $('#nestable').nestable({
                group: 1
            })
                .on('change', updateOutput);

            // output initial serialised data
            updateOutput($('#nestable').data('output', $('#nestable-output')));

            $('.js-nestable-action').on('click', function(e)
            {
                var target = $(e.target),
                    action = target.data('action');
                if (action === 'expand-all') {
                    $('.dd').nestable('expandAll');
                }
                if (action === 'collapse-all') {
                    $('.dd').nestable('collapseAll');
                }
            });
            layui.use(['layer'], function () {
                var layer=layui.layer;
                $('#submit').click(function(){
                    var json=$('#nestable-output').val();
                    var data={};
                    data.id=$('#id').val();
                    data.sort=json;
                    var form=$('#form');
                    console.log(data);
                    $.post(form.attr('action'),data,function(response){
                            layer.msg(response.msg);
                            if(response.code==0){
                                //关闭
                            }
                        })
                })
            });
        });

    })(window, document, window.jQuery);

</script>
</html>